<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- the5fire的技术博客实例 -->
	<title>index_demo6</title>
	<script src="js/jquery.js"></script>
	<script src="js/underscore.js"></script>
	<script src="js/backbone.js"></script>
</head>
<body>
    <div id="search_container"></div>

    <script type="text/template" id="search_template">
        <label><%= search_label %></label>
        <input type="text" id="search_input" />
        <input type="button" id="search_button" value="Search" />
    </script>


<script>
	(function ($) {
		SearchView = Backbone.View.extend({

		    initialize: function(){

		        // alert('init a SearchView');
		        this.render();

		    },
		    render: function() {

		        //使用underscore这个库，来编译模板

		        var template = _.template($("#search_template").html(),{});

		        //加载模板到对应的el属性中
		        // var html = compiled(data);
		        //this.el.html(template);   //感谢 子不语同学指正。
		        $(this.el).html(template({search_label:"子不语"}));
		       // 使用underscore这个库，来编译模板

		        // var template = _.template($("#search_template").html(),{search_label: "the5fire search"});

		        // //加载模板到对应的el属性中

		        // //this.el.html(template);
		        // $(this.el).html(template);
		    },
		    events:{  //就是在这里绑定的

		        'click input[type=button]' : 'doSearch'  //定义类型为button的input标签的点击事件，触发函数doSearch

		    },

		    doSearch: function(event){

		        alert("search for " + $("#search_input").val());

		    }

		});

		var searchView = new SearchView({el: $("#search_container")});

		// searchView.render();  //这个reander的方法可以放到view的构造函数中


	})(jQuery);
</script>
</body>
</html>